<template>
  <require from="./diagram-list.css"></require>

  <div class="diagram-list">
    <div class="diagram-list-container">
      <div show.bind="allDiagrams">
        <input type="file" ref="fileInput" accept=".xml, application/xml, .bpmn, application/bpmn20-xml" files.bind="selectedFiles" class="d-none">
        <table class="table table-striped table-bordered diagram-list-table">
          <tr>
            <th>Process Name</th>
          </tr>
          <tr repeat.for="diagram of allDiagrams" class="diagram-list-item">
            <td class="process-name-table-entry" id="diagram-${diagram.name}" title="${diagram.name}" click.delegate="openDiagram(diagram)">${diagram.name}</td>
          </tr>
        </table>
      </div>
      <div show.bind="!allDiagrams" class="container">
        <img src="src/resources/images/gears.svg" class="loading-spinner">
      </div>
    </div>
  </div>
</template>
